import React, { useEffect, useState } from 'react'
import useUpdate from './useUpdate'

export default function UseEffectDemo() {

  const [count, setCount] = useState(0)
  const [title, setTitle] = useState('hello')
  
  useEffect(() => {
    console.log(100)

    return () => {
      console.log('unmounted.')
    }
  }, [])

  useEffect(() => {
    console.log(0)
  }, [count, title])

  useUpdate(() => {
    console.log('updated.')
  })

  // useEffect(() => {
  //   console.log(1000)
  // })

  return (
    <>
      <div>{count}</div>
      <div>{title}</div>
      <button onClick={() => setCount(count + 1)}>add</button>
      <button onClick={() => setTitle('world')}>change</button>
    </>
  )
}
